Creating a rollover

A rollover is an image that changes when the pointer moves across it. A rollover actually consists of two images: the primary image (the image displayed when the page first loads) and the rollover image (the image that appears when the pointer moves over the primary image). When you create a rollover, both images must be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image.

For information about changing an image in response to a different event (for example, a mouse click) or about changing a different image than the one being rolled over, see Swap Image.

To create a rollover:

1	In the Document window, place the insertion point where you want the rollover to appear.
2	Insert the rollover by using one of these methods:
	Choose Window > Objects to open the Object palette, and click the Rollover button.
	Choose Insert > Rollover Image.
3	In the dialog box that appears, enter the following information:
	Browse and select an image, or type the path and file name of the original image in the Original Image field.
	Browse and select a rollover image, or type the path and file name of the rollover image in the Rollover Image field.
	To create a link, browse and select a file, or replace the # in the Link field with a path and file name.
	To have Dreamweaver preload the images in the browser's cache, select the Preload Images option.
4	Click OK.

To test a rollover:

1	Choose File > Preview in Browser.
2	In the browser, move the pointer over the primary image. The display should switch to the rollover image.

You can also create a navigation bar by using the Insert > Navigation Bar command. See Inserting a navigation bar.